/**
 * Created by suweiming on 2017/12/30.
 */
import React from 'react';
import {StyleSheet, Text, View, TextInput, Image} from 'react-native';
import {Form} from '../css/form';
import {Button} from 'native-base';
import {get, post, domain, md5} from '../lib/http';
import {Fom, Loading,Container, fnFail, fnSuccess, getMergeFormData, validateForm} from '../lib/components';

export default class Login extends React.Component {

    componentDidMount() {
        const self = this;

        get('/admin/user/get_current')
            .then(res => {
                self.props.login(res.data);
            })

    }

    render() {
        const self = this;
        var form = [
            {label: '手机号', name: 'userName', required: true, placehoder: '请输入手机号或用户名', formItemType: 'inline'},
            {
                label: '密码',
                name: 'password',
                password: true,
                placehoder: '请输入密码',
                required: true,
                formItemType: 'inline'
            },
            {
                label: '图片验证码', name: 'imgCode', placehoder: '请输入验证码', formItemType: 'inline', style: {paddingLeft: 2},
                sibling: <Image style={{width: 100, height: 40}}
                                source={{uri: domain + '/api/admin/code/captcha-image'}}/>

            },
        ];
        return (
            <Container>
                <View style={CSS.container}>
                    <View style={CSS.img}>
                        <Text style={CSS.logo}>登录LOGIN</Text>
                    </View>
                    <Fom ref="fom" data={form}></Fom>
                    <View style={CSS.ctner}>
                        <Button
                            block
                            onPress={() => {
                                var formData = self.refs.fom.state;

                                if (validateForm(form, getMergeFormData(form, formData))) { // 验证通过
                                    formData.password = md5(formData.password); //登录
                                    post('/admin/user/login', formData)
                                        .then(res => {
                                            if (res.code == 200) {
                                                self.props.login(res.data);
                                            }
                                        });
                                }

                            }}>
                            <Text>登录</Text>
                        </Button>
                    </View>
                </View>
            </Container>
        );
    }
}
export const CSS = StyleSheet.create({
    img: {height: 300, alignItems: 'center', alignContent: 'center', paddingTop: 50},
    login: {flex: 1},
    code: {marginTop: 20, flexDirection: 'row',},
    ctner: {marginTop: 20},
    logo: {
        fontSize: 60, color: '#41a2fc', marginTop: 30,
        textShadowColor: '#41a2fc',
        fontWeight: '500',
        textShadowOffset: {h: 10, w: 100},
    },
    ctnerBtn: {
        marginTop: 20, flexDirection: 'row',
    },
    container: {
        flex: 1,
        marginTop: 0,
        padding: 20,
    }
});

